<template>
  <div class="app">
    <h1>{{ msg }}，学生姓名是:{{ studnetName }}</h1>
    <!-- 通过父组件给子组件传递函数类型的props实现:子给父传递数据 -->
    <School :getSchoolName="getSchoolName" />
    <!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(使用@/v-on) -->
    <!-- <Student @atguigu="getStudentName" @demo="m1" /> -->
    <!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(使用ref) -->
    <Student ref="student" />
  </div>
</template>

<script>
import School from "./components/School";
import Student from "./components/Student";

export default {
  name: "App",
  components: { School, Student },
  data() {
    return {
      msg: "你好",
      studnetName: "",
    };
  },
  methods: {
    getSchoolName(name) {
      console.log("App收到了学校名：", name);
    },
    // getStudentName(name, ...a) {
    //   console.log("App收到了学生名：", name, a);
    //   this.studnetName = name;
    // },
    m1() {
      console.log("m1事件被触发了");
    },
  },
  mounted() {
    this.$refs.student.$on("atguigu", this.getStudentName); //绑定自定义事件
    // this.$refs.student.$once("atguigu", this.getStudentName); //一次性绑定自定义事件
  },
};
</script>
<style scoped>
.app {
  background-color: gray;
  padding: 5px;
}
</style>
